<template>
  <!--  归档页面 -->
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <div class="left-main-box">
          <!-- 左上的 title -->
          <div class="file-title">文章归档</div>
          <!-- 归档主要内容 盒子 -->
          <div class="file-box">
            <!-- 标签 -->
            <div class="file-tag-box">
              <!-- 标签 title -->
              <div class="tag-title">标签</div>
              <ul class="tag-box">
                <transition-group class="tag-move" name="tra-tag">
                  <li
                    v-for="t in tagAllandNum"
                    :key="t.name"
                    @click="goTagIsArticles(t.name)"
                  >
                    {{ t.name }}<span>{{ t.number }}</span>
                  </li>
                </transition-group>
              </ul>
            </div>
            <!-- 时间轴盒子 -->
            <div class="file-date-box">
              <!-- 时间轴 title -->
              <div class="date-title">时间轴(<span>月</span>)</div>
              <!-- 时间 内容  盒子-->
              <div class="date-box">
                <!-- 左边装饰线 -->
                <div class="line-box"></div>
                <!-- 下面 右边 时间内容 -->
                <div class="date-content-father">
                  <!-- 饿了么 折叠面板 -->
                  <el-collapse v-model="activeNames">
                    <!-- 第一个 -->
                    <el-collapse-item
                      :name="index"
                      v-for="(item, index) in fileList"
                      :key="index"
                    >
                      <template slot="title">
                        <!-- 标题 -->
                        <span class="my-el-title">
                          <!-- 左边线上的小圆点 -->
                          <span class="origin"></span>
                          <!-- 左边线上的箭头 -->
                          <span class="control iconfont">&#xe63d;</span>
                          {{ item.date }}&nbsp;
                          <em style="color: #ccc">({{ item.count }})</em>
                        </span>
                      </template>
                      <!-- 折叠层里面的内容 -->
                      <ul class="fold-content-box">
                        <li
                          v-for="i in item.blogArticles"
                          :key="i.articleId"
                          @click="goIsTitleArticles(i.articleId)"
                        >
                          <div class="fold-content">
                            {{ i.createDate }}：{{ i.articleTitle }}
                          </div>
                        </li>
                      </ul>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="register">
        <MyInfo></MyInfo>
        <Notice></Notice>
        <Mydate></Mydate>
        <NewReply></NewReply>
        <Tags></Tags>
      </div>
    </div>
  </div>
</template>

<script>
  // 右
  import MyInfo from '@/components/register/MyInfo.vue';
  import Notice from '@/components/register/Notice.vue';
  import Mydate from '@/components/register/Mydate.vue';
  import NewReply from '@/components/register/NewReply.vue';
  import Tags from '@/components/register/Tags.vue';
  // 接口
  import { postFileArtivle, postTagsArticle } from '../../api/articlei.js';
  import { tagAll } from '../../api/tags.js';
  // 导入时间库
  import * as dayjs from 'dayjs';
  export default {
    name: 'Main',
    data() {
      return {
        // 饿了么 用来展示 折叠层里面的内容 '1' 表示展示第一个
        activeNames: [0],
        fileList: [], // 存储数据
        tagAllandNum: [], // 存储所有标签
      };
    },
    components: {
      MyInfo,
      Notice,
      Mydate,
      NewReply,
      Tags,
    },
    methods: {
      //  获取 归档的文章
      async getFileArticle() {
        const { data: res } = await postFileArtivle();
        this.fileList = res.data;
        // 获取里面的每一个索引追加给 this.activeNames 让他们默认都展开
        this.fileList.forEach((val, index) => {
          this.activeNames.push(index);
        });
        //  修改里面的 日期格式
        this.fileList.forEach(val => {
          // 外层年和月
          val.date = dayjs(val.date).format('YYYY年MM月');
          val.blogArticles.forEach(val => {
            val.createDate = dayjs(val.date).format('MM月DD日');
          });
        });
      },
      // 获取所有标签
      async getTagAll() {
        const { data: res } = await tagAll(localStorage.getItem('token'));
        let t = {};
        // console.log(res.data);
        if (res) {
          // 获取每个标签有多少条数据
          res.data.forEach(val => {
            postTagsArticle(val.tagName, 0, 9999).then(res => {
              if (res) {
                t = {
                  name: val.tagName,
                  number: res.data.length,
                };
                this.tagAllandNum.push(t);
              }
            });
          });
        }
      },
      // 点击标签 去 该标签文章分类的页面
      goTagIsArticles(tag) {
        //   动态路由传递对象 router下的index 规则里面 不需要  :id  和 props
        this.$router.push({
          path: '/articles',
          name: 'Articles',
          query: { type: 'tag', val: tag },
        });
      },
      //  点击 折叠层里面的 文章标题 去该文章的详情页面
      goIsTitleArticles(id) {
        this.$router.push(`/artDetails/${id}`);
      },
    },
    created() {
      this.getFileArticle();
      this.getTagAll();
    },
  };
</script>

<style lang="less" scoped>
  //  element 折叠样式
  //  最大的 折叠盒子
  .el-collapse {
    margin-bottom: 40px;
    border: none !important;
  }
  // 折叠标题最大的盒子
  ::v-deep .el-collapse-item__header {
    margin-bottom: 25px;
    position: relative;
    border: none;
  }
  ::v-deep .el-collapse-item__wrap {
    margin-bottom: 20px;
    border-bottom: none;
  }
  // 标题里面的右侧小三角
  ::v-deep .el-collapse-item__arrow {
    position: absolute;
    right: 10px;
    color: salmon;
  }
  ::v-deep .el-collapse-item__content {
    padding-bottom: 0px;
  }
  // 折叠标题里面自己的标题盒子
  .my-el-title {
    position: relative;
    color: salmon;
    width: 100%;
    background-color: #f2f6fc;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    //  左边线上的小圆点
    .origin {
      position: absolute;
      top: 25px;
      left: -38px;
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: sandybrown;
    }
    // 左边线上的 箭头
    .control {
      position: absolute;
      top: 4px;
      left: -23px;
      width: 18px;
      height: 15px;
      color: sandybrown;
      transform: rotate(-358deg);
      display: inline-block;
      // background-color: #909199;
    }
  }

  //  标签 动画
  //  刚开始
  .tra-tag-enter,
  .tra-tag-leave-to {
    opacity: 0;
    transform: translateY(40px);
  }
  //  中间过度
  .tra-tag-enter-active {
    transition: all 1.5s;
  }
  .tra-tag-enter-to {
    opacity: 1;
    transform: translateY(0px);
  }

  @import url('../../state/mainPublic.less');
  @import url('../../state/css/barList/file.less');
</style>
